<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-group"></i> 自营提货卡
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input v-model="search.cardBatchName" placeholder="批次名" class="handle-input mr10"></el-input>
        <el-input v-model="search.cardBatchNo" placeholder="批次号" class="handle-input mr10"></el-input>
        <el-input v-model="search.cardNo" placeholder="提货卡号" class="handle-input mr10"></el-input>
        <el-input v-model="search.useUserMobile" placeholder="使用用户手机号" class="handle-input mr10"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button type="primary" @click="showExport = true">导出</el-button>
        <el-button type="primary" @click="showAdd = true">添加</el-button>
      </div>
      <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
        <el-table-column prop="cardBatchName" label="批次名"></el-table-column>
        <el-table-column prop="cardBatchNo" label="批次号"></el-table-column>
        <el-table-column prop="cardNo" label="提货卡号"></el-table-column>
        <el-table-column prop="cardPassword" label="提货卡密"></el-table-column>
        <el-table-column prop="cardValue" label="提货卡面值"></el-table-column>
        <el-table-column prop="createTime" label="开卡时间" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="effectiveDate" label="有效天数"></el-table-column>
        <el-table-column prop="effectiveTime" label="有效时间" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="classifyPic" label="二维码">
          <template #default="scope">
            <el-image class="table-td-thumb" :src="scope.row.qrCode"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="tradeGoodsName" label="提货商品名"></el-table-column>
        <el-table-column prop="usableTime" label="可用时间" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="useTime" label="使用时间" :formatter="dateFormat"></el-table-column>
        <el-table-column prop="useUserMobile" label="使用用户手机号"></el-table-column>
        <el-table-column label="使用状态">
          <template #default="scope">
            <el-tag v-if="scope.row.cardStatus == '0'">未使用</el-tag>
            <el-tag v-else-if="scope.row.cardStatus == '1'">已使用</el-tag>
            <el-tag v-else>已过期</el-tag>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination background layout="total, prev, pager, next" :current-page="query.pageIndex"
          :page-size="query.pageSize" :total="pageTotal" @current-change="handlePageChange"></el-pagination>
      </div>
    </div>

    <!-- 添加框 -->
    <el-dialog title="创建用户" v-model="showAdd" width="40%">
      <el-form ref="form" :model="list" label-width="100px">
        <el-form-item label="父级分类ID">
          <el-select v-model="list.tradeGoodsId" clearable placeholder="请选择">
            <el-option v-for="item in goodsList" :key="item.id" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="批次名">
          <el-input v-model="list.cardBatchName"></el-input>
        </el-form-item>
        <el-form-item label="提货卡数量">
          <el-input v-model="list.cardNumber"></el-input>
        </el-form-item>
        <el-form-item label="提货卡面值">
          <el-input v-model="list.cardValue"></el-input>
        </el-form-item>
        <el-form-item label="有效天数">
          <el-input v-model="list.effectiveDate"></el-input>
        </el-form-item>
        <el-form-item label="提货商品名">
          <el-input v-model="list.tradeGoodsName"></el-input>
        </el-form-item>
        <el-form-item label="开始使用时间">
          <el-date-picker v-model="usableTime" type="datetime" placeholder="选择日期时间" default-time="12:00:00">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAdd = false">取 消</el-button>
          <el-button type="primary" @click="add">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 导出框 -->
    <el-dialog title="创建用户" v-model="showExport" width="40%">
      <el-form ref="form" :model="eList" label-width="100px">
        <el-form-item label="使用状态">
          <el-radio-group v-model="eList.cardStatus">
            <el-radio :label="0">未使用</el-radio>
            <el-radio :label="1">已使用</el-radio>
            <el-radio :label="2">已过期</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="批次名">
          <el-input v-model="eList.cardBatchName"></el-input>
        </el-form-item>
        <el-form-item label="批次号">
          <el-input v-model="eList.cardBatchNo"></el-input>
        </el-form-item>
        <el-form-item label="提货卡号">
          <el-input v-model="eList.cardNo"></el-input>
        </el-form-item>
        <el-form-item label="使用用户手机号">
          <el-input v-model="eList.useUserMobile"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showExport = false">取 消</el-button>
          <el-button type="primary" @click="cardExport">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { cardAdd, cardExport, cardList } from "../../api/zyMall";
import { formatDate } from "../../common/data";
import moment from "moment";
export default {
  inject: ["reload"],
  filters: {
    formatDate(time) {
      time = time * 1000;
      let date = new Date(time);
      console.log(new Date(time));
      return formatDate(date, "yyyy-MM-dd hh:mm");
    },
  },
  name: "basetable",
  data() {
    return {
      query: {
        pageNo: 1,
      },
      search: {},
      tableData: [],
      showAdd: false,
      showExport: false,
      pageTotal: 0,
      list: {},
      eList: {},
      goodsList: [],
      usableTime: ""
    };
  },
  created() {
    this.getData();
  },
  mounted() { },
  methods: {
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },

    // 获取分类列表
    getData() {
      cardList({
        useUserMobile: this.search.useUserMobile,
        cardBatchName: this.search.cardBatchName,
        cardBatchNo: this.search.cardBatchNo,
        cardNo: this.search.cardNo,
        cardStatus: "",
        limit: 10,
        offset: this.query.pageNo,
      }).then((res) => {
        this.tableData = res.data.pickingCards.rows;
        this.pageTotal = res.data.pickingCards.total;
        this.goodsList = res.data.commodities;
      });
    },
    //导出
    cardExport() {
      this.showExport = false;
      console.log(this.eList);
      cardExport(this.eList).then((res) => {
        const blob = new Blob([res]); // 创建blob对象
        console.log(blob);
        const fileName = "提货卡.xlsx";
        const elink = document.createElement("a"); // 创建的标签
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob); // 创建url
        document.body.appendChild(elink); // 把 创建的标签追加到body里
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 移除标签
        this.$message({
          message: "导出成功！！！",
          type: "success",
        });
        this.$refs.multipleTable.clearSelection();
      });
    },
    //添加
    add() {
      this.list.usableTime = formatDate(new Date(this.usableTime), "yyyy-MM-dd hh:mm:ss")
      this.showAdd = false;
      cardAdd(this.list).then((res) => {
        if (res.code === 2000) {
          this.$message.success("新增成功");
          this.list = {};
          this.reload();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 触发搜索按钮
    handleSearch() {
      this.getData();
    },

    open(url) {
      this.$alert('<img class="bigwxpic" src="' + url + '" alt="">', {
        dangerouslyUseHTMLString: true,
        showConfirmButton: false,
      });
    },
    // 分页导航
    handlePageChange(val) {
      // console.log(val);
      this.query.pageNo = val;
      this.getData();
    },
  },
};
</script>

<style lang='scss' scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
<style>
.bigwxpic {
  width: 100%;
}
</style>
